import articleOperateLess from "./index.module.less";
import { Badge, Popover, Tooltip } from "antd";
import { useSelector } from "react-redux";
import {
  LikeFilled,
  MessageFilled,
  StarFilled,
  SmileFilled,
  WarningFilled,
  ReadFilled,
  WechatOutlined,
  WeiboOutlined,
  QqOutlined,
} from "@ant-design/icons";

const ArticleOperate = (prop: any) => {
  const UserId = useSelector((state: any) => state.user.UserId);
  const content = (
    <div className={articleOperateLess.forward_content}>
      <div className="forward_items">
        <div className="icon">
          <WechatOutlined />
        </div>
        <div className="naem">微信</div>
      </div>
      <div className="forward_items">
        <div className="icon">
          <WeiboOutlined />
        </div>
        <div className="naem">微博</div>
      </div>
      <div className="forward_items">
        <div className="icon">
          <QqOutlined />
        </div>
        <div className="naem">QQ</div>
      </div>
    </div>
  );
  return (
    <>
      <div className={articleOperateLess.articleOperate_allcontent}>
        <div className="all_author">
          <div className="author_img">
            <img src={prop.AuthorMessage?.HeaderImg} alt="" />
          </div>
          <div className="aboutme_action">关注</div>
        </div>
        <Badge
          count={2}
          overflowCount={99}
          offset={[5, 25]}
          style={{ backgroundColor: "#c2c8d1" }}
        >
          <div className="iconItems">
            <div className="icon">
              <LikeFilled />
            </div>
          </div>
        </Badge>
        <Badge
          count={2}
          overflowCount={99}
          offset={[5, 25]}
          style={{ backgroundColor: "#c2c8d1" }}
        >
          <div className="iconItems">
            <div className="icon">
              <MessageFilled />
            </div>
          </div>
        </Badge>
        <Badge
          count={3}
          overflowCount={99}
          offset={[5, 25]}
          style={{ backgroundColor: "#c2c8d1" }}
        >
          <div className="iconItems">
            <div className="icon">
              <StarFilled />
            </div>
          </div>
        </Badge>
        <Popover placement="right" content={content}>
          <div className="iconItems">
            <div className="icon">
              <SmileFilled />
            </div>
          </div>
        </Popover>
        <Tooltip placement="top" title="举报">
          <div className="iconItems">
            <div className="icon">
              <WarningFilled />
            </div>
          </div>
        </Tooltip>
        <Tooltip placement="bottom" title="沉浸模式">
          <div className="iconItems">
            <div className="icon">
              <ReadFilled />
            </div>
          </div>
        </Tooltip>
      </div>
    </>
  );
};

export default ArticleOperate;
